import React from 'react';
import { Row, Col, Form, InputNumber, Input, Button, Table, Select, Modal, Popconfirm, message } from 'antd';
const R = require('ramda');
import {connect} from 'dva/index';
import BizParams from '../../../components/commons/BizParams'
import Constants from "../../../utils/Constants";

const FormItem = Form.Item;
const view = "view"

const payerDetail = Form.create({ wrappedComponentRef: true })(class PayerDetail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
            disabled: true,
        }
    }

    handleCancel = () => {
        this.props.form.resetFields()
        this.setState({ open: false })
    }

    handleOpen = () => {
        this.setState({ open: true })
    }

    handleConfirm = () => {
        this.props.form.validateFields((errors, values) => {
            let dataSource = R.isNil(this.props.payer.dataSource) ? {} : this.props.payer.dataSource
            if (errors) return;
            this.props.dispatch({
                type: dataSource.id ? 'payer/update' : 'payer/save',
                payload: {
                    buyerId: this.props.buyerId,
                    id: dataSource.id,
                    ...values,
                    onSuccess: () => {
                        this.handleCancel();
                        this.props.dispatch({ type: 'payer/query', payload: { buyerId: this.props.buyerId, page: Constants.DEFAULT_PAGE } });
                    }
                }
            })
        })
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = { labelCol: { xs: { span: 8 }, sm: { span: 10 } }, wrapperCol: { xs: { span: 15 }, sm: { span: 14 } } };
        let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource;
        let footer = [
            <Popconfirm onConfirm={this.handleConfirm.bind(this, true)} cancelText="否" okText="是"
                placement="leftTop" title={'为了保持存量数据的一致性，付款人账户新增之后不能修改只能删除，请确认！'}>
                <Button key="ok" size="large">确定</Button>
            </Popconfirm>,
            <Button key="cancel" size="large" onClick={this.handleCancel.bind(this, true)}>取消</Button>
        ];
        return (
            <Modal visible={this.state.open} title={"添加付款账户"} width={600} wrapClassName="vertical-center-modal" maskClosable={false}
                footer={footer} onOk={this.handleConfirm} onCancel={this.handleCancel}>
                <Form>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="付款人名称" hasFeedback>
                                {getFieldDecorator('name', {
                                    rules: [{
                                        required: true, message: '请输入付款人名称'
                                    }],
                                    initialValue: dataSource.name
                                })(
                                    <Input maxLength="20" disabled={this.props.disabled || this.state.type == view} />
                                    )}
                            </FormItem></Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="付款人账户" hasFeedback>
                                {getFieldDecorator('account', {
                                    rules: [{
                                        required: true, message: '请输入付款人账户'
                                    }],
                                    initialValue: dataSource.account
                                })(
                                    <InputNumber maxLength="30" disabled={this.props.disabled || this.state.type == view} style={{width: '100%'}} />
                                    )}
                            </FormItem></Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="开户银行" hasFeedback>
                                {getFieldDecorator('bankId', {
                                    rules: [{
                                        required: true, message: '请输入开户银行'
                                    }],
                                    initialValue: R.isNil(dataSource.bankId) ? '' : dataSource.bankId + ''
                                })(
                                    <BizParams sprCode={"bankCode"} style={{ width: '100%' }} blank={true} />
                                    )}
                            </FormItem></Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="开户支行" hasFeedback>
                                {getFieldDecorator('bankBranch', {
                                    rules: [{
                                        required: true, message: '请输入开户支行'
                                    }],
                                    initialValue: dataSource.bankBranch
                                })(
                                    <Input maxLength="30" disabled={this.props.disabled || this.state.type == view} />
                                    )}
                            </FormItem></Col>
                    </Row>
                </Form>
            </Modal>
        );
    }
})

function mapStateToProps(state) {
    return {
        loading: state.loading.models.payer, payer: state.payer
    };
}

export default connect(mapStateToProps)(payerDetail);